<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Js点击俺就变色</title>
    <style>
        .text{
            width: 300px;
            height: 300px;
            background-color: black;
            margin: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            /*display: inline;*/
            position: relative;
            top: 30px;
        }
    </style>
</head>

<body>
    <!--
      点击便变色过程关键是；函数；给按钮添加了该属性onclick="changeColor()"
    -->
    <input type="button" onclick="changeColor()" value="请您碰一下">
    <script>
        function changeColor() {
            document.body.style.backgroundColor = 'yellow'
            if (className = 'text') {
                div1.style.backgroundColor = 'red'
                div2.style.backgroundColor = 'green'
                div3.style.backgroundColor = 'fuchsia'
            }
            else {
                if (className = 'a') {
                    div1.style.backgroundColor = 'green'
                    div2.style.backgroundColor = 'green'
                    div3.style.backgroundColor = 'green'
                }
                if (className = 'b') {
                    div1.style.backgroundColor = 'fuchsia'
                    div2.style.backgroundColor = 'fuchsia'
                    div3.style.backgroundColor = 'fuchsia'
                }
            }
              
        }
        var div1 = document.createElement('div')
        var div2 = document.createElement('div')
        var div3 = document.createElement('div')

        document.body.appendChild(div1)
        document.body.appendChild(div2)
        document.body.appendChild(div3)
        //    创建类名

        div1.setAttribute("class", "text");
        div2.className = 'text'
        div3.className = 'text'
        // div1.class = "dddddd" 这种方式不可以添加
        //    document.createAttribute(HTMLDivElement)
        // div1.setAttribute("class", "a");
        // div2.className = 'a'
        // div3.className = 'a'
        // div1.setAttribute("class", "b");
        // div2.className = 'b'
        // div3.className = 'b'
    </script>
    <!--onclick 添加-->

</body>

</html>